var path = require('path');
var webpack = require('webpack');

var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');

module.exports = {
    // 指定context选项为webpack-assets.json文件所在的目录，即根目录。
    context: path.resolve(__dirname),
    devtool: 'cheap-eval-source-map',
    entry: [
        //由于本例将开发服务器独立到了3001端口上，所以还需要指定热替换的新路径为 http://localhost:3001/__webpack_hmr。
        'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr',
        './client/index.js'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'http://localhost:3001/static/'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools')).development()
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                include: __dirname,
                query: {
                    presets: ['react-hmre']
                }
            },
            { test: /\.png$/, loader: 'url-loader?limit=10240' },
            // 添加style-loader和css-loader两个加载器来调用CSS文件。
            // style-loader用于将样式嵌入页面中。
            // css-loader用于加载样式文件。
            // ?modules表示激活CSS Module，一旦此项被激活，CSS中的类选择器 .counter 将变为 ._35UgWDOiXIX_lWjbLQ3U-N以实现CSS的模块化。不过你也可以通过一些参数把变化后的类选择器名称指定为更加语义化的格式，这些我们在后面会详细讲解。
            { test: /\.css$/, loader: 'style-loader!css-loader?modules' }
        ]
    }
};
